import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom'
import { Layout, Menu } from 'antd'
import {
    PushpinOutlined,
    ProfileOutlined,
    InstagramOutlined,
    StarOutlined,
    CarryOutOutlined,
} from '@ant-design/icons'
import './index.css'

const { Content, Sider } = Layout
const items = [
    {
        key: '/interactive/Photo',
        icon: <InstagramOutlined />,
        label: '通知管理',
        children: [
            {
                key: '/interactive/interactives',
                label: '通知列表',
            },
            {
                key: '/interactive/tz',
                label: '通知列表管理',
            },
        ]
    },
    {
        key: '/interactive/studentAbsent',
        // type: 'group',
        icon: <PushpinOutlined />,
        label: '学生请假',
        children: [
            {
                key: '/interactive/studentAbsent/absentList',
                label: '学生请假列表',
            },
            {
                key: '/interactive/studentAbsent/absentAudit',
                label: '学生请假审核',
            },
            {
                key: '/interactive/studentAbsent/absentRecord',
                label: '请假记录',
            },
            {
                key: '/interactive/studentAbsent/absentSetting',
                label: '请假设置',
            }
        ]
    },
    {
        key: '/interactive/Photo',
        icon: <InstagramOutlined />,
        label: '相册管理',
        children: [
            {
                key: '/interactive/Photo/Album',
                label: '相册列表',
            },
            {
                key: '/interactive/Photo/Audit',
                label: '审核列表',
            },
            {
                key: '/interactive/Photo/Install',
                label: '审核设置',
            },
        ]
    },
    //评价管理
    {
        key: '/interactive/Estimate',
        icon: <StarOutlined />,
       label: '评价管理',
        children: [
            {
                key: '/interactive/Estimate/Estimate',
                label: '评价列表',
            },
            {
                key: '/interactive/Estimate/Power',
                label: '评价权限设置'
            }
        ]
    },
    {
        key: '/interactive/voteManage',
        icon: <ProfileOutlined />,
        label: '投票管理',
    },
    // 健康中心
    {
        key: '/interactive/jk',
        icon: <ProfileOutlined />,
        label: '健康中心',
    },
    //出勤管理
    {
        key: '/interactive/Attendance',
        icon: <CarryOutOutlined />,
        label: '出勤确认',
        children: [
            {
                key: '/interactive/Attendance/Call',
                label: '今日点名',
            },
            {
                key: '/interactive/Attendance/Attendance',
                label: '出勤统计',
            },
        ]
    }

]


function InterActive(props) {
    const navigate = useNavigate()

    const clickMenu = ({ keyPath }) => {
        console.log(keyPath[0])

        navigate(keyPath[0])
    }

    return (
        <div className='index_layout' >
        <Sider width={ 240 } collapsed = { false}>
            <Menu items={ items } onClick = { clickMenu } mode= "inline" style= {{ minHeight: '105vh' }
} />
    < /Sider>
    < Layout className= 'index_content' >
        <Content>
        <Outlet />
        < /Content>
        < /Layout>
        < /div>
    );
}

export default InterActive;